K.

requires("K.ui.Component").

provides("K.ui.ViewPort").
run(function(I) {
    var ViewPort = I.Component.descend(function(o) {
        var components = {},
            shared = {
                component : I.provides
            };
        
        ViewPort.ancestor.constructor.call(o, shared);
        
        K.merge(o, {
            id : function() {
                return id
            },
            
            add : function(component) {
                var id = component.id();
                if (id in components) {
                    return;
                }
                
                components[id] = component;
                o.element().append(component.element());
                component.render();
            },
            
            render : function() {
                shared.theme.apply(o);
                K.forEach(components, function(c) {
                    c.render();
                });
            }
            
        });
    });
    
    return ViewPort;
});
